<template>
	<view>
		<view class="head-section">
			<view class="countdown-time">
				<view class="title">支付剩余时间</view>
				<view class="countdown-time-con">
					<view v-if="!timeup">
						<uni-countdown :show-day="false" color="#FFFFFF" background-color="#fa436a" splitorColor="#EF2B2C"
							:hour="0" :minute="30" :second="0"  @timeup="timeupHandle"></uni-countdown>
					</view>
					<view class="timeup" v-else>订单已超时</view>
				</view>
			</view>
			<view class="tip">下单后请在30分钟内完成支付超时未付款的订单将被自动取消</view>
			<view class="order b-t">
				订单号：{{orderDto.orderId}} <text class="price">¥999.0</text>
			</view>
		</view>
		
		<view class="pay-section">
			<text class="title">请选择支付方式：</text>
			<view class="pay-way-list">
				<view class="type-item" @click="changePayType(1)">
					<text class="icon yticon icon-weixinzhifu"></text>
					<view class="con">
						<text class="tit">微信支付</text>
						<text>推荐使用微信支付</text>
					</view>
					<label class="radio">
						<radio value="" color="#fa436a" :checked='payType == 1' />
						</radio>
					</label>
				</view>
				<view class="type-item" @click="changePayType(2)">
					<text class="icon yticon icon-alipay"></text>
					<view class="con">
						<text class="tit">支付宝支付</text>
					</view>
					<label class="radio">
						<radio value="" color="#fa436a" :checked='payType == 2' />
						</radio>
					</label>
				</view>
				<view class="type-item" @click="changePayType(3)">
					<text class="icon yticon icon-erjiye-yucunkuan"></text>
					<view class="con">
						<text class="tit">预存款支付</text>
						<text>可用余额 ¥198.5</text>
					</view>
					<label class="radio">
						<radio value="" color="#fa436a" :checked='payType == 3' />
						</radio>
					</label>
				</view>
			</view>
		</view>
		
		<view class="pay" @click="topay">确认支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDto:{},
				timeup:false,
				payType: 1,
			}
		},
		onLoad(event) {
			// TODO 后面把参数名替换成 payload
			const payload = event.orderDto || event.payload;
			// 目前在某些平台参数会被主动 decode，暂时这样处理。
			try {
				this.orderDto = JSON.parse(decodeURIComponent(payload));
			} catch (error) {
				this.orderDto = JSON.parse(payload);
			}
			
			console.log("this.orderDto: ",this.orderDto);
		},
		methods: {
			timeupHandle(){
				this.timeup = true;
			},
			topay(){
				uni.navigateTo({
					url: './paySuccess?orderId=' + this.orderDto.id
				});
			},
			changePayType(payType) {
				this.payType = payType;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $page-color-base;
	}
	
	.head-section {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background: #fff;
		padding: 20rpx 20rpx;
		
		.countdown-time {
			padding: 0 35%;
		}
		
		.title {
			font-size: $uni-font-size-base;
			text-align: center;
		}
		
		.timeup {
			font-size: $uni-font-size-sm - 2rpx;
			text-align: center;
		}
		
		.tip {
			font-size: $uni-font-size-sm - 2rpx;
			color: $font-color-light;
			text-align: center;
		}
		
		.countdown-time-con {
			padding: 30rpx;
		}
		
		.order {
			display: flex;
			justify-content: space-between;
			font-size: $uni-font-size-base;
			margin-top: 40rpx;
			
			.price {
				color: $base-color;
			}
		}
	}

    .pay-section {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background: #fff;
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
		
		.title {
			font-size: $uni-font-size-base;
		}
		
		.pay-way-list {
			padding: 0 10rpx;
			
			.type-item{
				height: 120rpx;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				position:relative;
			}
			
			.icon{
				width: 100rpx;
				font-size: 52rpx;
			}
			.icon-erjiye-yucunkuan {
				color: #fe8e2e;
			}
			.icon-weixinzhifu {
				color: #36cb59;
			}
			.icon-alipay {
				color: #01aaef;
			}
			.tit{
				font-size: $uni-font-size-lg;
				color: $font-color-dark;
				margin-bottom: 4rpx;
			}
			.con{
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: $uni-font-size-sm;
				color: $font-color-light;
			}
		}
	}
	
	.pay {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 60rpx auto 30rpx;
		padding: 0 30rpx;
		background-color: $base-color;
		color: white;
		font-size: $uni-font-size-base;
		width: 85%;
		height: 70rpx;
		border-radius: 7rpx;
		box-shadow: 1rpx 2rpx 5rpx rgba(219, 63, 96, 0.4);
	}

</style>
